<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>untitle</title>
		<style type="text/css">
			* 
			{
				margin: 0;
				padding: 0;
			}
			.box {
				width: 800px;
				height: 800px;
				background: #000;
				margin: 20px auto;
				padding-top: 20px;
			}
			.constrast {
				width: 100%;
				height: 100%;
				background: #000;
				position: relative;
				filter: contrast(15);
				animation: hueRotate 5s linear infinite;
			}
			.circle {
				width: 300px;
				height: 300px;
				position: absolute;
				left: 50%;
				top: 0;
				margin-left: -150px; 
				filter: blur(8px);
				animation: circleRotate 5s linear infinite;
			}
			.circle::before {
				content: '';
				width: 200px;
				height: 200px;
				background: #00ff6f;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				border-radius: 42% 38% 62% 49% / 45%;
			}
			.circle::after {
				content: '';
				width: 176px;
				height: 178px;
				background: #000;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				border-radius: 50%;
			}

			@keyframes hueRotate {
				0% {
					filter: contrast(15) hue-rotate(0);
				}
				100% {
					filter: contrast(15) hue-rotate(360deg);
				}
			}
			@keyframes circleRotate {
				0% {
					transform: rotate(0deg);
				}
				100% {
					transform: rotate(360deg);
				}
			}

			.number {
				width: 200px;
				height: 200px;
				text-align: center;
				color: #fff;
				line-height: 200px;
				position: absolute;
				top: 5%;
				left: 50%;
				margin-left: -100px;
				z-index: 9;
				font-family: '黑体';
				font-size: 30px;
			}
			.bubble-home {
				width: 150px;
				height: 50px;
				background-color: #00ff6f;
				position: absolute;
				bottom: 0;
				left: 50%;
				margin-left: -75px;
				border-radius: 150px 150px 0 0;
				filter: blur(8px);
			}
			.bubble {
				background: #00ff6f;
				border-radius: 100%;
				position: absolute;
				bottom: 1.5%;
				transform: translate(-50%, 0);
				z-index: 100;
				filter: blur(5px);
			}

			@keyframes bubbleMoveUp {
				0% {
					bottom: 20px;
				}
				100% {
					bottom: calc(100% - 260px);
				}
			}
		</style>
	</head>
	<body>
		<div class='box'>
			<div class='constrast'>
				<span class="bubble"></span>
				<span class="bubble"></span>
				<span class="bubble"></span>
				<span class="bubble"></span>
				<span class="bubble"></span>
				<span class="bubble"></span>
				<span class="bubble"></span>
				<span class="bubble"></span>
				<span class="bubble"></span>
				<span class="bubble"></span>
				<span class="bubble"></span>
				<span class="bubble"></span>
				<span class="bubble"></span>
				<span class="bubble"></span>
				<span class="bubble"></span>
				<span class="bubble"></span>
				<span class="bubble"></span>
				<span class="bubble"></span>
				<span class="bubble"></span>
				<div class="number">55.61%</div>
				<div class="bubble-home"></div>
				<div class='circle'></div>
			</div>
		</div>
		<script type="text/javascript">
			const bubbles = document.querySelectorAll('.bubble');
			const number = document.querySelector('.number');
			bubbles.forEach(v=> {
				const random = Math.random();
				const random2 = Math.random() - 0.5;
				const r =  Math.round(random * 30) + 10;
				v.style.cssText = `
				width: ${r}px;
				height: ${r}px;
				left: ${50 + (random2 * 8)}%;
				animation: bubbleMoveUp ${Math.round(Math.random() * 7)}s ease-in-out infinite;
				animation-delay: ${Math.random() * 1.5}s;`
			});
			setInterval(()=> {
				number.innerText = (parseFloat(number.innerText) + 0.01).toFixed(2) + '%';
			}, 1000);
		</script>
	</body>
</html>